<!DOCTYPE html>
<html>
<head>
  {{$topic := .topic}}
  {{$user := .user}}
  <title>{{$topic.title}}</title>

 <link rel="stylesheet" type="text/css" id="stylesheet"
       href="/styles/default.css" />
	    <style>
	      body {
	        margin: 0px;
	        padding: 0px;
	      }
	    </style>
    <meta charset="utf-8" />
    </head>
	  <body>
	    <div id="container"></div>
	    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.3.min.js"></script>
	

	

	    <script defer="defer">
	
	
          var vpw2 = document.documentElement.clientWidth / 2;	
	      var vph2 = document.documentElement.clientHeight / 2;	
	
	      var stage = new Kinetic.Stage({
	        container: 'container',
	        width: {{.width}},
	        height: {{.height}}
	      });

	      var lineLayer = new Kinetic.Layer();
	
	      var titleLayer = new Kinetic.Layer();	
	
          var line = null;
          var titleText = null;
          var titleArea = null;
          var titleOffset = null;

          var subtypeColor = '#FF9933';
          var merioColor = 'blue';
          var linkColor = merioColor;

		  {{$pos1 := position $topic $user}}
		
		  ///////////////////////////////////////////////	
				
	      // since this text is inside of a defined area, we can center it using
	      // align: 'center'
	      titleText = new Kinetic.Text({
	        x: {{$pos1.x}},
	        y: {{$pos1.y}},
	        text: '{{$topic.title}}',
	        fontSize: 12,
	        fontFamily: 'Calibri,Sans-serif',
	        fill: 'black',
	        // width: 380,
	        padding: 8,			
	        align: 'center'
	      });
	
          titleOffset = titleText.getWidth() / 2;		

	      titleArea = new Kinetic.Rect({
	        x: {{$pos1.x}},
	        y: {{$pos1.y}},
	        stroke: '#555',
	        strokeWidth: 2,
	        fill: '#ddd',
	        width: titleText.getWidth(),
	        height: titleText.getHeight(),
	        shadowColor: 'black',
	        shadowBlur: 5,
	        shadowOffset: [5, 5],
	        shadowOpacity: 0.2,
	        cornerRadius: 5
	      });
	
	      // to align text in the middle of the screen, we can set the
	      // shape offset to the center of the text shape after instantiating it		
	      titleText.setOffset({
	        x: titleOffset
	      });	
	
	      titleArea.setOffset({
	        x: titleOffset
	      });			
	
	     titleText.on("click tap", function() {location.href="{{urlPath $topic}}"});
	
	     titleArea.on("click tap", function() {location.href="{{urlPath $topic}}"});	
	
	      // add the shapes to the lineLayer
	      titleLayer.add(titleArea);
	      titleLayer.add(titleText);
	
	
		  ///////////////////////////////////////////////	
	
		  {{range $topic.toLinks}}
             {{$to := .to}}
		  	 {{$pos6 := position $to $user}}
		
			  ///////////////////////////////////////////////	

		      // since this text is inside of a defined area, we can center it using
		      // align: 'center'
		      titleText = new Kinetic.Text({
		        x: {{$pos6.x}},
		        y: {{$pos6.y}},
		        text: '{{$to.title}}',
		        fontSize: 9,
		        fontFamily: 'Calibri,Sans-serif',
		        fill: 'black',
		        // width: 380,
		        padding: 3,			
		        align: 'center'
		      });

	          titleOffset = titleText.getWidth() / 2;		

		      titleArea = new Kinetic.Rect({
		        x: {{$pos6.x}},
		        y: {{$pos6.y}},
		        // stroke: '#555',
		        strokeWidth: 0,
		        fill: '#ddd',
		        opacity: 0.7,		
		        width: titleText.getWidth(),
		        height: titleText.getHeight(),
		        shadowColor: 'black',
		        shadowBlur: 3,
		        shadowOffset: [3, 3],
		        shadowOpacity: 0.2,
		        cornerRadius: 3
		      });

		      // to align text in the middle of the screen, we can set the
		      // shape offset to the center of the text shape after instantiating it		
		      titleText.setOffset({
		        x: titleOffset
		      });	

		      titleArea.setOffset({
		        x: titleOffset
		      });				

		      titleText.on("click tap", function() {location.href="/graph?topic={{encUrlPath $to}}"});

		      titleArea.on("click tap", function() {location.href="/graph?topic={{encUrlPath $to}}"});
		
		      // add the shapes to the lineLayer
		      titleLayer.add(titleArea);
		      titleLayer.add(titleText);

			  ///////////////////////////////////////////////		
		

	
	         line = new Kinetic.Line({		
		         points: [{{$pos1.x}},{{$pos1.y}},{{$pos6.x}},{{$pos6.y}}],               
		         stroke: 'green',
		         strokeWidth: 1,
		         lineCap: 'round',
		         lineJoin: 'round'
		     });  
	         lineLayer.add(line);	
	      {{end}}
	
	
		  {{range $topic.fromLinks}}
             {{$from := .from}}
		  	 {{$pos7 := position $from $user}}
		
			  ///////////////////////////////////////////////	

		      // since this text is inside of a defined area, we can center it using
		      // align: 'center'
		      titleText = new Kinetic.Text({
		        x: {{$pos7.x}},
		        y: {{$pos7.y}},
		        text: '{{$from.title}}',
		        fontSize: 9,
		        fontFamily: 'Calibri,Sans-serif',
		        fill: 'black',
		        // width: 380,
		        padding: 3,			
		        align: 'center'
		      });

	          titleOffset = titleText.getWidth() / 2;		

		      titleArea = new Kinetic.Rect({
		        x: {{$pos7.x}},
		        y: {{$pos7.y}},
		        // stroke: '#555',
		        strokeWidth: 0,
		        fill: '#ddd',
		        opacity: 0.7,		
		        width: titleText.getWidth(),
		        height: titleText.getHeight(),
		        shadowColor: 'black',
		        shadowBlur: 3,
		        shadowOffset: [3, 3],
		        shadowOpacity: 0.2,
		        cornerRadius: 3
		      });

		      // to align text in the middle of the screen, we can set the
		      // shape offset to the center of the text shape after instantiating it		
		      titleText.setOffset({
		        x: titleOffset
		      });	

		      titleArea.setOffset({
		        x: titleOffset
		      });				

		      titleText.on("click tap", function() {location.href="/graph?topic={{encUrlPath $from}}"});
		
		      titleArea.on("click tap", function() {location.href="/graph?topic={{encUrlPath $from}}"});
		
		      // add the shapes to the lineLayer
		      titleLayer.add(titleArea);
		      titleLayer.add(titleText);

			  ///////////////////////////////////////////////		
		
	         line = new Kinetic.Line({		
		         points: [{{$pos1.x}},{{$pos1.y}},{{$pos7.x}},{{$pos7.y}}],               
		         stroke: 'green',
		         strokeWidth: 1,
		         lineCap: 'round',
		         lineJoin: 'round'
		     });  
	         lineLayer.add(line);	
		  {{end}}
	
	
	
		  ///////////////////////////////////////////////	
	
		  {{range $topic.childLinks}}
             {{$child := .child}}
		  	 {{$pos2 := position $child $user}}
		
			  ///////////////////////////////////////////////	

		      // since this text is inside of a defined area, we can center it using
		      // align: 'center'
		      titleText = new Kinetic.Text({
		        x: {{$pos2.x}},
		        y: {{$pos2.y}},
		        text: '{{$child.title}}',
		        fontSize: 10,
		        fontFamily: 'Calibri,Sans-serif',
		        fill: 'black',
		        // width: 380,
		        padding: 3,			
		        align: 'center'
		      });

	          titleOffset = titleText.getWidth() / 2;		

		      titleArea = new Kinetic.Rect({
		        x: {{$pos2.x}},
		        y: {{$pos2.y}},
		        // stroke: '#555',
		        strokeWidth: 0,
		        fill: '#ddd',
		        opacity: 0.7,		
		        width: titleText.getWidth(),
		        height: titleText.getHeight(),
		        shadowColor: 'black',
		        shadowBlur: 3,
		        shadowOffset: [3, 3],
		        shadowOpacity: 0.2,
		        cornerRadius: 3
		      });

		      // to align text in the middle of the screen, we can set the
		      // shape offset to the center of the text shape after instantiating it		
		      titleText.setOffset({
		        x: titleOffset
		      });	

		      titleArea.setOffset({
		        x: titleOffset
		      });				

		      titleText.on("click tap", function() {location.href="/graph?topic={{encUrlPath $child}}"});

		      titleArea.on("click tap", function() {location.href="/graph?topic={{encUrlPath $child}}"});
		
		      // add the shapes to the lineLayer
		      titleLayer.add(titleArea);
		      titleLayer.add(titleText);

			  ///////////////////////////////////////////////		
		
		
		
             {{$subtype := .subType}}
             {{if eq $subtype "SupertypeSubtype"}}
                 linkColor = subtypeColor;
	         {{else}}
	             linkColor = merioColor;
		     {{end}}	
	        
	         line = new Kinetic.Line({		
		         points: [{{$pos1.x}},{{$pos1.y}},{{$pos2.x}},{{$pos2.y}}],               
		         stroke: linkColor,
		         strokeWidth: 1,
		         lineCap: 'round',
		         lineJoin: 'round'
		     });		

	         lineLayer.add(line);		
	
			  {{range $child.childLinks}}
	             {{$child := .child}}
			  	 {{$pos3 := position $child $user}}
			
				  ///////////////////////////////////////////////	

			      // since this text is inside of a defined area, we can center it using
			      // align: 'center'
			      titleText = new Kinetic.Text({
			        x: {{$pos3.x}},
			        y: {{$pos3.y}},
			        text: '{{$child.title}}',
		            fontSize: 9,
		            fontFamily: 'Calibri,Sans-serif',
			        fill: 'black',
			        // width: 380,
			        padding: 3,			
			        align: 'center'
			      });

		          titleOffset = titleText.getWidth() / 2;		

			      titleArea = new Kinetic.Rect({
			        x: {{$pos3.x}},
			        y: {{$pos3.y}},
			        // stroke: '#555',
			        strokeWidth: 0,
			        fill: '#ddd',
			        opacity: 0.7,		
			        width: titleText.getWidth(),
			        height: titleText.getHeight(),
			        shadowColor: 'black',
			        shadowBlur: 3,
			        shadowOffset: [3, 3],
			        shadowOpacity: 0.2,
			        cornerRadius: 3
			      });

			      // to align text in the middle of the screen, we can set the
			      // shape offset to the center of the text shape after instantiating it		
			      titleText.setOffset({
			        x: titleOffset
			      });	

			      titleArea.setOffset({
			        x: titleOffset
			      });				

			      titleText.on("click tap", function() {location.href="/graph?topic={{encUrlPath $child}}"});
			
			      titleArea.on("click tap", function() {location.href="/graph?topic={{encUrlPath $child}}"});
				
			      // add the shapes to the lineLayer
			      titleLayer.add(titleArea);
			      titleLayer.add(titleText);

				  ///////////////////////////////////////////////			
			
			
	             {{$subtype := .subType}}
	             {{if eq $subtype "SupertypeSubtype"}}
	                 linkColor = subtypeColor;
		         {{else}}
		             linkColor = merioColor;
			     {{end}}
			
		         line = new Kinetic.Line({		
		         points: [{{$pos2.x}},{{$pos2.y}},{{$pos3.x}},{{$pos3.y}}],            
			         stroke: linkColor,
			         strokeWidth: 1,
			         lineCap: 'round',
			         lineJoin: 'round'
			     });		
		         	
			
			
			
			
			
			
			
			
		         lineLayer.add(line);	
		
				  {{range $child.childLinks}}
		             {{$child := .child}}
				  	 {{$pos4 := position $child $user}}
				
					  ///////////////////////////////////////////////	

				      // since this text is inside of a defined area, we can center it using
				      // align: 'center'
				      titleText = new Kinetic.Text({
				        x: {{$pos4.x}},
				        y: {{$pos4.y}},
				        text: '{{$child.title}}',
		                fontSize: 8,
		                fontFamily: 'Calibri,Sans-serif',
				        fill: 'black',
				        // width: 380,
				        padding: 3,			
				        align: 'center'
				      });

			          titleOffset = titleText.getWidth() / 2;

				      titleArea = new Kinetic.Rect({
				        x: {{$pos4.x}},
				        y: {{$pos4.y}},
				        // stroke: '#555',
				        strokeWidth: 0,
				        fill: '#ddd',
				        opacity: 0.7,		
				        width: titleText.getWidth(),
				        height: titleText.getHeight(),
				        shadowColor: 'black',
				        shadowBlur: 3,
				        shadowOffset: [3, 3],
				        shadowOpacity: 0.2,
				        cornerRadius: 3
				      });

				      // to align text in the middle of the screen, we can set the
				      // shape offset to the center of the text shape after instantiating it		
				      titleText.setOffset({
				        x: titleOffset
				      });	

				      titleArea.setOffset({
				        x: titleOffset
				      });			

				      titleText.on("click tap", function() {location.href="/graph?topic={{encUrlPath $child}}"});	
				
				      titleArea.on("click tap", function() {location.href="/graph?topic={{encUrlPath $child}}"});	
					
				      // add the shapes to the lineLayer
				      titleLayer.add(titleArea);
				      titleLayer.add(titleText);

					  ///////////////////////////////////////////////				

		             {{$subtype := .subType}}
		             {{if eq $subtype "SupertypeSubtype"}}
		                 linkColor = subtypeColor;
			         {{else}}
			             linkColor = merioColor;
				     {{end}}
				
			         line = new Kinetic.Line({		
				         points: [{{$pos3.x}},{{$pos3.y}},{{$pos4.x}},{{$pos4.y}}],               
				         stroke: linkColor,
				         strokeWidth: 1,
				         lineCap: 'round',
				         lineJoin: 'round'
				     });  
			         lineLayer.add(line);	
		         {{end}}
					              
	          {{end}}	
          
          {{end}}


		  {{range $topic.parentLinks}}
             {{$parent := .parent}}
		  	 {{$pos2 := position $parent $user}}
	
			  ///////////////////////////////////////////////	

		      // since this text is inside of a defined area, we can center it using
		      // align: 'center'
		      titleText = new Kinetic.Text({
		        x: {{$pos2.x}},
		        y: {{$pos2.y}},
		        text: '{{$parent.title}}',
		        fontSize: 10,
		        fontFamily: 'Calibri,Sans-serif',
		        fill: 'black',
		        // width: 380,
		        padding: 3,			
		        align: 'center'
		      });

	          titleOffset = titleText.getWidth() / 2;	

		      titleArea = new Kinetic.Rect({
		        x: {{$pos2.x}},
		        y: {{$pos2.y}},
		        // stroke: '#555',
		        strokeWidth: 0,
		        fill: '#ddd',
		        opacity: 0.7,		
		        width: titleText.getWidth(),
		        height: titleText.getHeight(),
		        shadowColor: 'black',
		        shadowBlur: 3,
		        shadowOffset: [3, 3],
		        shadowOpacity: 0.2,
		        cornerRadius: 3
		      });

		      // to align text in the middle of the screen, we can set the
		      // shape offset to the center of the text shape after instantiating it		
		      titleText.setOffset({
		        x: titleOffset
		      });	

		      titleArea.setOffset({
		        x: titleOffset
		      });			

		      titleText.on("click tap", function() {location.href="/graph?topic={{encUrlPath $parent}}"});	
		      titleArea.on("click tap", function() {location.href="/graph?topic={{encUrlPath $parent}}"});
			
		      // add the shapes to the lineLayer
		      titleLayer.add(titleArea);
		      titleLayer.add(titleText);

			  ///////////////////////////////////////////////
			
             {{$subtype := .subType}}
             {{if eq $subtype "SupertypeSubtype"}}
                 linkColor = subtypeColor;
	         {{else}}
	             linkColor = merioColor;
		     {{end}}			
			
	         line = new Kinetic.Line({		
		         points: [{{$pos1.x}},{{$pos1.y}},{{$pos2.x}},{{$pos2.y}}],               
		         stroke: linkColor,
		         strokeWidth: 1,
		         lineCap: 'round',
		         lineJoin: 'round'
		     });  
	         lineLayer.add(line);		
	
			  {{range $parent.parentLinks}}
	             {{$parent := .parent}}
			  	 {{$pos3 := position $parent $user}}
			
				  ///////////////////////////////////////////////	

			      // since this text is inside of a defined area, we can center it using
			      // align: 'center'
			      titleText = new Kinetic.Text({
			        x: {{$pos3.x}},
			        y: {{$pos3.y}},
			        text: '{{$parent.title}}',
		            fontSize: 9,
		            fontFamily: 'Calibri,Sans-serif',
			        fill: 'black',
			        // width: 380,
			        padding: 3,			
			        align: 'center'
			      });

		          titleOffset = titleText.getWidth() / 2;		

			      titleArea = new Kinetic.Rect({
			        x: {{$pos3.x}},
			        y: {{$pos3.y}},
			        // stroke: '#555',
			        strokeWidth: 0,
			        fill: '#ddd',
			        opacity: 0.7,		
			        width: titleText.getWidth(),
			        height: titleText.getHeight(),
			        shadowColor: 'black',
			        shadowBlur: 3,
			        shadowOffset: [3, 3],
			        shadowOpacity: 0.2,
			        cornerRadius: 3
			      });

			      // to align text in the middle of the screen, we can set the
			      // shape offset to the center of the text shape after instantiating it		
			      titleText.setOffset({
			        x: titleOffset
			      });	

			      titleArea.setOffset({
			        x: titleOffset
			      });			

                  titleText.on("click tap", function() {location.href="/graph?topic={{encUrlPath $parent}}"});

                  titleArea.on("click tap", function() {location.href="/graph?topic={{encUrlPath $parent}}"});

			      // add the shapes to the lineLayer
			      titleLayer.add(titleArea);
			      titleLayer.add(titleText);

				  ///////////////////////////////////////////////			

	             {{$subtype := .subType}}
	             {{if eq $subtype "SupertypeSubtype"}}
	                 linkColor = subtypeColor;
		         {{else}}
		             linkColor = merioColor;
			     {{end}}
			
		         line = new Kinetic.Line({		
			         points: [{{$pos2.x}},{{$pos2.y}},{{$pos3.x}},{{$pos3.y}}],               
			         stroke: linkColor,
			         strokeWidth: 1,
			         lineCap: 'round',
			         lineJoin: 'round'
			     });  
		         lineLayer.add(line);	
		
				  {{range $parent.parentLinks}}
		             {{$parent := .parent}}
				  	 {{$pos4 := position $parent $user}}

					  ///////////////////////////////////////////////	

				      // since this text is inside of a defined area, we can center it using
				      // align: 'center'
				      titleText = new Kinetic.Text({
				        x: {{$pos4.x}},
				        y: {{$pos4.y}},
				        text: '{{$parent.title}}',
		                fontSize: 8,
		                fontFamily: 'Calibri,Sans-serif',
				        fill: 'black',
				        // width: 380,
				        padding: 3,			
				        align: 'center'
				      });

			          titleOffset = titleText.getWidth() / 2;

				      titleArea = new Kinetic.Rect({
				        x: {{$pos4.x}},
				        y: {{$pos4.y}},
				        // stroke: '#555',
				        strokeWidth: 0,
				        fill: '#ddd',
				        opacity: 0.7,		
				        width: titleText.getWidth(),
				        height: titleText.getHeight(),
				        shadowColor: 'black',
				        shadowBlur: 3,
				        shadowOffset: [3, 3],
				        shadowOpacity: 0.2,
				        cornerRadius: 3
				      });

				      // to align text in the middle of the screen, we can set the
				      // shape offset to the center of the text shape after instantiating it		
				      titleText.setOffset({
				        x: titleOffset
				      });	

				      titleArea.setOffset({
				        x: titleOffset
				      });			

	                  titleText.on("click tap", function() {location.href="/graph?topic={{encUrlPath $parent}}"});
	
                      titleArea.on("click tap", function() {location.href="/graph?topic={{encUrlPath $parent}}"});				

				      // add the shapes to the lineLayer
				      titleLayer.add(titleArea);
				      titleLayer.add(titleText);

					  ///////////////////////////////////////////////

		             {{$subtype := .subType}}
		             {{if eq $subtype "SupertypeSubtype"}}
		                 linkColor = subtypeColor;
			         {{else}}
			             linkColor = merioColor;
				     {{end}}
				
			         line = new Kinetic.Line({		
				         points: [{{$pos3.x}},{{$pos3.y}},{{$pos4.x}},{{$pos4.y}}],               
				         stroke: linkColor,
				         strokeWidth: 1,
				         lineCap: 'round',
				         lineJoin: 'round'
				     });  
			         lineLayer.add(line);	
		         {{end}}
					              
	          {{end}}	
          
          {{end}}


	      stage.add(lineLayer);
		  stage.add(titleLayer);
		
          window.scrollTo({{$pos1.x}}-vpw2,{{$pos1.y}}-vph2)			
	    </script>

</body>
</html>